<template>
    <div id="center_container">
      <k-header headTitle="个人中心" goBack="" rightTitle="测试" @rightClick="oBtn"></k-header>
      <div class="top_info">
        <div class="top_info_center">
            <div class="info_name">
              <p>罗先生</p>
              <img src="../../assets/img/avatar.png" alt="">
            </div>
            <div class="info_com">
              <p>蓝瘦香菇广州有限公司</p>
              <img src="../../assets/img/avatar.png" alt="">
            </div>
        </div>
      </div>
      <group>
        <cell title="title" is-link>
          <span slot="default" style="color: #F89721">你好</span>
          <img width="16" style="display:block;margin-right:9px;" src="../../assets/img/center/center-one.png" slot="icon">
        </cell>
        <cell title="title" is-link>
          <span slot="default" style="color: #F89721">你好</span>
          <img width="16" style="display:block;margin-right:9px;" src="../../assets/img/center/center-one.png" slot="icon">
        </cell>
        <cell title="title" is-link>
          <span slot="default" style="color: #F89721">你好</span>
          <img width="16" style="display:block;margin-right:9px;" src="../../assets/img/center/center-one.png" slot="icon">
        </cell>
      </group>
      <group>
        <cell title="title" is-link>
          <span slot="default" style="color: #F89721">你好</span>
          <img width="16" style="display:block;margin-right:9px;" src="../../assets/img/center/center-one.png" slot="icon">
        </cell>
        <cell title="title" is-link>
          <span slot="default" style="color: #F89721">你好</span>
          <img width="16" style="display:block;margin-right:9px;" src="../../assets/img/center/center-one.png" slot="icon">
        </cell>
      </group>
      <group>
        <cell title="title" is-link>
          <span slot="default" style="color: #F89721">你好</span>
          <img width="16" style="display:block;margin-right:9px;" src="../../assets/img/center/center-one.png" slot="icon">
        </cell>
      </group>
      <alert></alert>
      <confirm>
      </confirm>
      <div v-transfer-dom>
        <x-dialog v-model="show" hide-on-blur >你是那个鬼呀</x-dialog>
      </div>

      <router-link to="login">login</router-link>
      <router-link to="entrypass">登录</router-link>
    </div>
</template>

<script>
  import kHeader from '../common/head'
  import { Cell, Group, Alert, Confirm, XDialog  } from 'vux'
  import { TransferDomDirective as TransferDom } from 'vux'
    export default {
        name: 'hello',
        directives: {
          TransferDom
        },
        data () {
            return {
              show:false
            }
        },
      components: {
        kHeader,
        Cell,
        Group,
        Alert,
        Confirm,
        XDialog
      },
      methods:{
        oBtn:function(val){
          this.showConfirm ();
        },
        showPlugin () {
          this.$vux.alert.show({
            title: 'mmp的',
            content: '说的就是你呀',
            onShow () {
              console.log('咋回事打开了？')
            },
            onHide () {
              console.log('咋回事关闭了？')

            }
          })
        },
        showPluginAuto () {
          this.showPlugin()
          setTimeout(function () {
            this.$vux.alert.hide()
        }, 3000)
        },
        showConfirm () {
          var that = this;
          this.$vux.confirm.show({
            title: '你好呀',
            content: '你确定要吃翔？',
            onShow () {
              console.log('confirm出现')
            },
            onHide () {
              console.log('confirm隐藏')
            },
            onCancel () {
              console.log('点击取消')
            },
            onConfirm () {
              console.log('点击确定')
              that.show = true;
            }
          })
        }


      }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #center_container{
    padding-top: 45px;
  }
  .top_info{
    height:150px;
    padding: 15px;
  }
  .top_info_center{
    width:100%;
    height:100%;
    background-color: white;
  }
  .info_name{
    width:100%;
    height:50%;
  }
  .info_name p{
    font-size: 18px;
    color: #212121;
    letter-spacing: 0;
    line-height: 40px;
    float: left;
    margin-top: 20px;
    margin-left: 24px;
  }
  .info_name img{
    width:40px;
    height:40px;
    border-radius: 40px;
    float: right;
    margin-top: 20px;
    margin-right: 24px;
  }
  .info_com p{
    font-size: 14px;
    color: #212121;
    margin-top: 10px;
    margin-left: 24px;
  }
  .info_com img{
    width:50px;
    height:15px;
    margin-top: 5px;
    margin-left: 24px;
  }
  .m-inner{
    padding-left: 4.5%;
    padding-right: 4.5%;
    background: #FFFFFF;
  }
  .m-inner .form-group{
    height: 44px;
    position: relative;
    line-height: 44px;
    border-bottom: 1px solid #eee;
  }
  .m-inner .form-group .left-icon{
    width:16px;
    height:16px;
  }
  .m-inner .form-group .form-label{
    font-size: 0.14rem;
    position: absolute;
    left: 25px;
  }
  .m-inner .form-group .form-input{
    width: 100%;
    font-size: 0;
    line-height: 44px;
    position: absolute;
    right: 0;
  }
  .m-inner .form-group .form-input .m-text {
    width: 100%;
    height: 44px;
    line-height: 20px;
    border: none;
    background: 0 0;
    text-align: right;
  }
  .form-border{
    border-bottom: 1px solid #eee !important;
  }

</style>
